<template>
  <div class="page">
    <div id="YmyTow"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {
    this.dataMunicipal();
  },
  methods: {
  // 市级分析展示
    dataMunicipal() {
      var YmyChartccc = this.$echarts.init(document.getElementById("YmyTow"));
      YmyChartccc.setOption({
        color: ["#33CCCC"],
        title: {
          text: "市级责任单位第一季度综合得分",
          left: "center"
        },
        xAxis: {
          type: "category",
          data: [
            "市委军民融合办",
            "市气象局",
            "市供销联社",
            "市秦岭保护局",
            "市税务局",
            "市委编办",
            "市妇联"
          ],
          axisLabel: {
            formatter: function(value) {
              return value.split("").join("\n");
            }
          }
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
            showBackground: true,
            barWidth: 40,
            backgroundStyle: {
              color: "rgba(220, 220, 220, 0.8)"
            },
            itemStyle: {
              normal: {
                //这里是重点
                color: function(params) {
                  //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                  var colorList = [
                    "#c23531",
                    "#2f4554",
                    "#61a0a8",
                    "#d48265",
                    "#91c7ae",
                    "#749f83",
                    "#ca8622",
                    "#91c7ae",
                    "#749f83",
                    "#ca8622"
                  ];
                  return colorList[params.dataIndex];
                }
              }
            }
          }
        ]
      });
    }
  }
};
</script>
<style lang="less" scoped>
.page {
  width: 100%;
  height: auto;
  > div {
    width: 100%;
    height: 440px;
    margin-top:50px;
  }
}
</style>
